<template>
	<div class="container">
		<!-- 左侧 -->
		<div id="left" :style="{left: (operateWidth - 300) + 'px'}">
			<leftmenu ref="leftmenu"></leftmenu>
			<div class="menu" @click="changeMenuState">
				<i class="iconfont" :class="operateState=='show'?'icon-back':'icon-more'"></i>
			</div>
		</div>
		<!-- 右侧 -->
		<div id="right" :style="{left: operateWidth + 'px'}">
			<rightmap @changeoverlaydata="changeOverlayData"></rightmap>
		</div>
	</div>
</template>
<script>
	import {mapState} from 'vuex';
	import {getPageData} from 'utils/page';
	import leftmenu from './left-menu';
	import rightmap from './right-map';
	export default {
		data(){
			return {
				operateWidth: 300,
				operateState: 'show'
			}
		},
		components: {
			leftmenu,
			rightmap
		},
		beforeMount(){
			//获取存储的zoom、形状、参照物，zoom的格式相同，形状本地存储和页面使用不一致，所以单独存储
			this.$store.dispatch('setZoomData', getPageData('zoom'));
			this.$store.dispatch('setLocalOverlays', getPageData('overlaysPoints'));
			this.$store.dispatch('setLocalReference', getPageData('referencePoints'));
		},
		methods: {
			changeMenuState(){
				this.operateWidth = this.operateState == 'show' ? 0 : 300;
				this.operateState = this.operateState == 'show' ? 'hide' : 'show';
			},
			changeOverlayData(result){
				this.$refs.leftmenu.changeOverlayData(result);
			}
		}
	}
</script>
<style lang="scss" scope>
	.container {
		position: relative;
		height: 100%;
		#left {
			z-index: 10;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 300px;
			transition: all .3s ease-in;
			.menu {
				position: absolute;
				top: 50%;
				right: -21px;
				width: 20px;
				height: 100px;
				line-height: 100px;
				border: 1px solid #ddd;
				border-left: none;
				background-color: #fff;
				transform: translate(0, -50%);
				cursor: pointer;
			}
		}
		#right {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			transition: all .3s ease-in;
		}
	}
</style>

